{%- stylesheet -%}
  .block_rich_text .content {
    text-align: var(--text-algin);
    position: relative;
    background-color: var(--bg-color);
    padding: var(--padding);
    color: var(--text-color);
    border-radius: var(--content-radius);
    overflow: hidden;
  }
  @media screen and (max-width: 767px) {
    .block_rich_text .content {
      padding: var(--mobile-padding);
    }
  }
  @media screen and (min-width: 768px) {
    .block_rich_text .content {
      max-width: var(--pc-max-width);
      margin: 0 auto;
    }
  }
  .block_rich_text .content .text_title {
    font-family: var(--title_font_family);
    font-style: var(--title_font_style);
    font-weight: var(--title_font_weigth);
    letter-spacing: var(--title_letter_spacing);
    font-size: var(--title_font_size);
  }
  @media (max-width: 767px) {
    .block_rich_text .content .text_title {
      font-size: calc(var(--title_font_size) * var(--wap_title_scale));
    }
  }
  .block_rich_text .content .text_detail {
    margin-top: 20px;
  }
  .block_rich_text .content .btn_wrap a {
    display: inline-flex;
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border-color: var(--btn-bg);
  }
{%- endstylesheet -%}

{% assign data = section.settings %}

<div class="block_rich_text" style="--text-algin: {{ data.text_algin }};">
  <div class="container_wrapper">
    <div
      class="content"
      style="
        --pc-max-width: {{ data.pc_max_width }}%;--content-radius: {{ data.content_radius }}px;--bg-color: {{ data.bg_color }};--text-color: {{ data.text_color }};--padding: {{data.padding.top}}px {{data.padding.right}}px {{data.padding.bottom}}px {{data.padding.left}}px;
        --mobile-padding: {{data.mobile_padding.top}}px {{data.mobile_padding.right}}px {{data.mobile_padding.bottom}}px {{data.mobile_padding.left}}px;
      "
    >
      {% if data.title != '' %}
        <div class="text_title">{{ data.title }}</div>
      {% endif %}
      {% if data.detail != '' %}
        <div class="text_detail">{{ data.detail }}</div>
      {% endif %}
      {% if data.btn_text != '' %}
        <div class="btn_wrap" style="--btn-color: {{data.btn_color}};--btn-bg: {{data.btn_bg}};">
          <a href="{{ data.link | setUrlDataFrom:data_from }}" class="main_btn">{{ data.btn_text }}</a>
        </div>
      {% endif %}
    </div>
  </div>
</div>

{% schema %}
{
  "class": "block_rich_text",
  "is_global": false,
  "icon": "icon-T",
  "name": {
    "zh_CN": "富文本",
    "en_US": "Rich text"
  },
  "blocks": [],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_layout",
      "label": {
        "zh_CN": "PC内容留白",
        "en_US": "PC content blank"
      },
      "id": "padding"
    },
    {
      "type": "card_layout",
      "label": {
        "zh_CN": "移动端内容留白",
        "en_US": "Mobile content blank"
      },
      "id": "mobile_padding"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "PC最大宽度",
        "en_US": "PC max width"
      },
      "id": "pc_max_width",
      "max": 100,
      "min": 50,
      "unit": "%",
      "default": 100
    },
    {
      "type": "card_select",
      "label": {
        "zh_CN": "文字对齐方式",
        "en_US": "Text alignment"
      },
      "default": "center",
      "id": "text_algin",
      "option": [
        {
          "label": {
            "zh_CN": "居左",
            "en_US": "To the left"
          },
          "value": "left"
        },
        {
          "label": {
            "zh_CN": "居中",
            "en_US": "In the center"
          },
          "value": "center"
        },
        {
          "label": {
            "zh_CN": "居右",
            "en_US": "To the right"
          },
          "value": "right"
        }
      ]
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "default": "THE ADVENTURE STARTS HERE",
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "描述",
        "en_US": "Description"
      },
      "id": "detail",
      "default": "We share the same experiences that you do on rock, ice and snow and these experiences push us to make the best gear possible for our climbers and skiers."
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "按钮文字",
        "en_US": "Button text"
      },
      "default": "View",
      "id": "btn_text"
    },
    {
      "type": "card_page_link",
      "label": {
        "zh_CN": "按钮链接",
        "en_US": "Button link"
      },
      "default": {
        "type": "",
        "title": "",
        "url": ""
      },
      "id": "link"
    },
    {
      "type": "card_input_number",
      "max": 200000,
      "min": 0,
      "id": "content_radius",
      "label": {
        "zh_CN": "内容圆角",
        "en_US": "Rounded corners of content"
      },
      "info": {
        "zh_CN": "内容宽度单位px",
        "en_US": "Content width unit px"
      },
      "default": 0
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "颜色设置",
        "en_US": "Color Settings"
      }
    },
    {
      "type": "card_color",
      "id": "bg_color",
      "label": {
        "zh_CN": "背景颜色",
        "en_US": "Background color"
      },
      "default": ""
    },
    {
      "type": "card_color",
      "id": "text_color",
      "label": {
        "zh_CN": "文字颜色",
        "en_US": "Text color"
      },
      "default": "#1D1F21"
    },
    {
      "type": "card_color",
      "id": "btn_color",
      "label": {
        "zh_CN": "按钮文字颜色",
        "en_US": "Button text color"
      },
      "default": "#ffffff"
    },
    {
      "type": "card_color",
      "id": "btn_bg",
      "label": {
        "zh_CN": "按钮背景颜色",
        "en_US": "Button background color"
      },
      "show-alpha": "false",
      "color-format": "rgb",
      "default": "rgba(29, 31, 33, 1)"
    }
  ],
  "default": {
    "settings": {
      "padding": {
        "top": "0",
        "left": "0",
        "right": "0",
        "bottom": "0"
      },
      "mobile_padding": {
        "top": "0",
        "left": "0",
        "right": "0",
        "bottom": "0"
      },
      "pc_max_width": 100,
      "text_algin": "center",
      "title": "THE ADVENTURE STARTS HERE",
      "detail": "We share the same experiences that you do on rock, ice and snow and these experiences push us to make the best gear possible for our climbers and skiers.",
      "btn_text": "View",
      "link": {
        "type": "",
        "title": "",
        "url": ""
      },
      "content_radius": 0,
      "bg_color": "",
      "text_color": "#1D1F21",
      "btn_color": "#ffffff",
      "btn_bg": "rgba(29, 31, 33, 1)"
    },
    "blocks": []
  }
}
{% endschema %}
